<template>
  <div class="big-back-box">
    <div class="top" style="margin-bottom: 20px">公司设立信息填写</div>
    <!-- 表单卡片 -->
    <div style="width: 600px; margin: 0 auto">
      <el-form ref="form" :model="form" label-width="130px" :rules="rules">
        <!-- 表单填写框 -->
        <el-form-item label="公司名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="企业性质">
          <el-input v-model="form.nature"></el-input>
        </el-form-item>
        <el-form-item label="成立日期">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker v-model="form.establishmentDate" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="注册地址">
          <el-input v-model="form.registeredAddress"></el-input>
        </el-form-item>
        <el-form-item label="办公地点">
          <el-input v-model="form.officeLocation"></el-input>
        </el-form-item>
        <el-form-item label="注册资本" prop="registeredCapital">
          <el-input v-model="form.registeredCapital"></el-input>
        </el-form-item>
        <el-form-item label="法定代表人">
          <el-input v-model="form.legalRepresentative"></el-input>
        </el-form-item>
        <el-form-item label="法定代表人身份证">
          <el-input v-model="form.legalRepresentativeIdcard"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div style="height: 30px; margin: 0 auto" align="center"></div>
    <!-- 流程图 -->
    <div
      style="
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 100px;
        text-align: center;
        vertical-align: middle;
      "
    >
      <img src="./image/img_compsetup.png" alt />
    </div>

    <!-- 打包购买 -->
    <el-card class="box-card" style="margin: 0 auto; width: 60vw">
      <!-- 卡片页头 -->
      <div slot="header" class="clearfix">
        <span style="font-size: 20px; line-height: 2em">公司设立一条龙服务</span>
        <el-button
          style="float: right; font-size: 15px"
          type="primary"
          size="small"
          @click="setupCompany"
        >一键购买</el-button>
      </div>

      <el-card class="setup-step-card-left">
        核名
        <br />1000元
      </el-card>
      <el-card class="setup-step-card">
        注册
        <br />1000元
      </el-card>
      <el-card class="setup-step-card">
        印章刻制
        <br />1000元
      </el-card>
      <el-card class="setup-step-card">
        银行开户
        <br />1000元
      </el-card>
      <el-card class="setup-step-card-right">
        打包购买
        <br />
        <span style="color: red">4000元</span>
      </el-card>
    </el-card>
  </div>
</template>

<script>
// 公司设立
import { CompanyEstablishment } from "@/api/companyServer.js";

export default {
  data() {
    return {
      rules:{
       registeredCapital:[
       { required: true, message: '资金必须是非字符', trigger: 'blur' },
       ]
      },
      size: "",
      form: {
        name: "",
        nature: "",
        establishmentDate: "",
        registeredAddress: "",
        officeLocation: "",
        registeredCapital: "",
        legalRepresentative: "",
        legalRepresentativeIdcard: ""
      },
      money: 4000
    };
  },
  methods: {
    // 提交公司设立数据表
    setupCompany() {
      this.$confirm("确定购买?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        })
        .then(() => {
          CompanyEstablishment(this.form).then(resp => {
            if (resp.data.result2) {
              this.$message(resp.data.message1);
            }else{
              this.$message("未登录,请登录");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消购买"
          });
        });
    }
  }
};
</script>

<style scoped>
/* 设立流程说明图 */
img {
  width: 650px;
  height: 150px;
}

/* 模板卡片 */
.text {
  font-size: 14px;
}
.item {
  padding: 18px 0;
}
.box-card {
  width: 480px;
}

/* 页头LOGO */
.top {
  height: 50px;
  width: 1080px;
  margin-left: 45px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

/* 大盒子 */
.big-back-box {
  width: 1080px;
  margin: 0 auto;
}

/* 每个流程步骤的说明小卡片 */
.setup-step-card-left {
  width: 150px;
  height: 100px;
  text-align: center;
  line-height: 30px;
  float: left;
  margin-bottom: 30px;
}
.setup-step-card {
  width: 150px;
  height: 100px;
  text-align: center;
  line-height: 30px;
  float: left;
  margin-bottom: 30px;

  margin-left: 20px;
}
.setup-step-card-right {
  width: 150px;
  height: 100px;
  text-align: center;
  line-height: 30px;
  float: left;
  margin-bottom: 30px;

  margin-left: 20px;
  /* background-color: lightgray; */
  /* padding-top: 20px; */
  border: #409eff solid;
  font-size: 20px;
}
</style>